<template>
  <div class="footer-wrapper fs-16 c-999">
    <div class="w-content">
      <div class="content-wrap d-flex">
        <div class="content-left">
          <div class="logo-white"><img :src="logoWhiteImg"></div>
          <div class="slogan c-white">畅享便利生活，尽在一刻钟</div>
          <div class="copyright-wrapper w-100">
            <div class="copyright-content-1 w-100 d-flex flex-wrap flex-jc-sb">
              <div class="copyright-item">版权所有：{{ copyright }}&nbsp;&nbsp;</div>
              <div class="copyright-item">技术支持：xxxxxx</div>
              <div class="copyright-item fw-700 t-underline">备案号：xxxxxx号</div>
            </div>
          </div>
        </div>
        <div class="content-right d-flex flex-end fs-14">
          <div class="right-item">
            <div class="qr-code"><img :src="qrCodeImg"></div>
            <!--            <div class="qr-code-tip">扫一扫进入微信小程序</div>-->
          </div>
          <!--          <div class="right-item">-->
          <!--            <div class="qr-code"><img :src="qrCodeImg"></div>-->
          <!--            <div class="qr-code-tip">扫一扫关注微信公众号</div>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
    <!--    <div class="side-box d-flex flex-column flex-ai-c flex-jc-sa fs-16">-->
    <!--      <div class="side-item d-flex flex-column flex-ai-c flex-jc-c" @click="goToPage(0)">-->
    <!--        <div class="img1" />-->
    <!--        <div>咨询</div>-->
    <!--      </div>-->
    <!--      <div class="side-item2 d-flex flex-column flex-ai-c flex-jc-c" @click="goToPage(1)">-->
    <!--        <div class="img2" />-->
    <!--        <div>客服</div>-->
    <!--      </div>-->
    <!--      <div class="side-item d-flex flex-column flex-ai-c flex-jc-c" @click="goToPage(2)"> 常见<br>问题</div>-->
    <!--    </div>-->
    <el-backtop />
  </div>
</template>

<script>
import { copyright } from '@/settings'

export default {
  name: 'PortalFooter',
  data() {
    return {
      logoWhiteImg: require('@/assets/portal_images/logo_white.png'),
      emblem2Img: require('@/assets/portal_images/emblem2.png'),
      qrCodeImg: require('@/assets/portal_images/qr_code.png'),
      copyright: copyright
    }
  },
  methods: {
    goToPage(index) {
      if (index === 0) {
        this.$router.push({ path: '/communication' })
      }
    },
    linkTo(index) {
      switch (index) {
        case 0:
          window.open('http://www.mofcom.gov.cn/')
          break
        case 1:
          window.open('https://commerce.ah.gov.cn/')
          break
        case 2:
          window.open('https://www.fy.gov.cn')
          break
        case 3:
          window.open('https://swj.fy.gov.cn/')
          break
        case 4:
          window.open('https://beian.miit.gov.cn/')
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.footer-wrapper {
  background-color: #354060;
  width: 100%;
  height: 270px;
  position: relative;

  .content-wrap {
    height: 257px;
    border-bottom: 1px solid #4D5773;
    padding: 80px 0 40px 0;

    .content-left {
      width: 775px;
    }

    .content-right {
      width: 425px;
      text-align: right;
    }

    .logo-white {
      height: 74px;

      img {
        height: 100%;
      }
    }

    .slogan {
      margin-top: 24px;
      height: 23px;
    }

    .link-url {
      margin-top: 32px;
      height: 23px;

      .link-item {
        margin-right: 40px;
        cursor: pointer;
      }
    }

    .right-item {
      width: 143px;

      .qr-code {
        width: 143px;
        //height: 143px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .qr-code-tip {
        height: 23px;
        margin-top: 14px;
      }
    }
  }

  .copyright-wrapper {
    .copyright-item {
      line-height: 23px;
    }

    .copyright-content-1 {
      margin-top: 20px
    }

    .copyright-content-2 {
      margin-top: 24px;
    }
  }
}

.side-box {
  position: fixed;
  right: 40px;
  bottom: 100px;
  height: 300px;
  width: 80px;
  background-color: #ffffff;
  border: 1px solid #DDDDDD;
  color: #333;
  z-index: 9999;

  .side-item, .side-item2 {
    cursor: pointer;
    width: 100%;
    height: 34%;
    margin: 0 12px;
    border-bottom: 1px dashed #E5E5E5;

    .img1 {
      width: 24px;
      height: 24px;
      background-image: url('~@/assets/portal_images/side_zx.png');
      margin-bottom: 12px;
    }

    .img2 {
      width: 24px;
      height: 24px;
      background-image: url('~@/assets/portal_images/side_kf.png');
      margin-bottom: 12px;
    }

    &:hover {
      color: #ffffff;
      background-color: $portalBlueColor;
    }
  }

  .side-item:hover :nth-child(1) {
    background-image: url('~@/assets/portal_images/side_zx_s.png');
  }

  .side-item2:hover :nth-child(1) {
    background-image: url('~@/assets/portal_images/side_kf_s.png');
  }
}
</style>
